import React, { Key, useEffect, useState } from 'react'
import { Button, Form, Input, Table, Card, message, Tooltip } from 'antd';
import { SearchOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
import style from './index.module.css'
import { getHosSetListRequest, deleteHosSetFromIdRequest,batchRemoveRequest } from '@/api/hospital/hospitalSet';
//引入records的参数类型
import type { getHosSetListRecordsType, getHosSetListItemsType } from '@/api/hospital/model/hospitalSetTypes'
import { useNavigate } from 'react-router-dom';


//收集表单的值的类型
interface FieldValueType {
  hosname?: string,
  hoscode?: string
}
export default function HospitalSet() {
  //设置编程式路由
  const navigate = useNavigate()

  //设置处理表格的数据状态钩子,result.records就是表格的数据,在定义时规定参数类型
  const [tableData, setTableData] = useState<getHosSetListRecordsType>([])
  //设置current的状态钩子
  const [current, setCurrent] = useState(1)
  //设置每页条数
  const [pageSize, setPageSize] = useState(6)
  //设置总条数
  const [total, setTotal] = useState(0)
  //设置是否正在加载中
  const [isLoading, setIsLoading] = useState(false)
  //设置查询表单的状态钩子,fieldValue收集到的对象展开就是发请求时设置的可选的参数,点击表单收集到的值(searchHosFinishHandle函数)设置给setFieldValue
  const [fieldValue, setFieldValue] = useState<FieldValueType>({})
  //设置删除后重新渲染数据的钩子
  const [isDeleteById, setIsDeleteById] = useState(true)
  //设置表格有选中时控制button的disabled状态的钩子
  const [isSelected, setIsSelected] = useState(true)
  //设置保存被选中的医院列表的id的钩子
  const [isSelectedId,setIsSelectedId] = useState<Key[]>([])

  //一进入组件就需要发送请求,请求分页列表的数据
  //useEffect的第一个参数可能需要返回值,用来清理副效应,但是 由于await 在后面书写的return就变成了异步的,执行时直接就走了
  //所以在useEffect中再包一层函数,调用

  useEffect(() => {
    //一开始发请求的时候,就显示正在加载
    setIsLoading(true)
    const getHosSetList = async () => {
      const result = await getHosSetListRequest({ page: current, limit: pageSize, ...fieldValue })
      // console.log(result, 'result');
      setTableData(result.records)
      setTotal(result.total)
      //请求发送完成后不再显示loading界面
      setIsLoading(false)
    }
    getHosSetList()

  }, [current, pageSize, fieldValue, isDeleteById])


  //column和data中都需要有key,
  //在column中如果有dataIndex属性可以不写key
  //data中如果没有key属性,可以在table中用rowKey = data中的某个属性,去代替处理
  const columns = [
    {
      title: '序号',
      //表格宽度(数字或字符串,不需要加单位)
      width: 50,
      dataIndex: 'key',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode',
    },
    {
      title: 'api基础路径',
      dataIndex: 'apiUrl',
    },
    {
      title: '签名',
      dataIndex: 'signKey',
    },
    {
      title: '联系人姓名',
      dataIndex: 'contactsName',
    },
    {
      title: '联系人手机',
      dataIndex: 'contactsPhone',
    },
    {
      title: '操作',
      dataIndex: 'tags',
      width: 120,
      fixed: 'right' as 'right',
      render(_: any, params: getHosSetListItemsType) {
        // render接收的第二个参数就是接收的records里的对象的类型,这个类型在之前已经定义过,在这个位置直接用就可以
        const { id } = params

        return (
          <div>
            <Tooltip title='更新医院'>

              <Button
                type='primary'
                icon={<EditOutlined />}
                className={style.mr}
                onClick={() => {
                  navigate(`/syt/hospital/updateHosSet/${id}`)
                }} ></Button>
            </Tooltip>
            <Tooltip title='删除医院'>
              <Button
                onClick={deleteHosSetFromIdHandle(id)}
                type='primary'
                danger
                icon={<DeleteOutlined />
                } ></Button>
            </Tooltip>
          </div>
        )
      }
    },
  ];


  //1.添加当前页码和每页条数变化的事件函数pagination的onChange事件
  const changePageHandle = (current: number, pageSize: number) => {
    //当当前页码或每页条数变化时重新发送请求,所以副作用钩子要检测current和pageSize的变化,设置给UesEffect的第二个参数
    //把当前点击的current和pageSize给状态钩子
    setCurrent(current)
    setPageSize(pageSize)
  }

  //2.点击查询表单获取数据的事件
  const searchHosFinishHandle = (FieldValue: FieldValueType) => {
    console.log(FieldValue, "a");
    setFieldValue(FieldValue)
  }

  //3.点击添加的事件函数(点击添加跳转到添加数据的表单中)
  //路由跳转:编程式路由和声明式路由(声明式路由渲染后是a标签,不适用)
  const addHosHandle = () => {
    navigate("/syt/hospital/addHosSet")
  }

  //4.点击修改的事件函数(可以直接在button里修改)

  //5.点击删除的事件函数
  const deleteHosSetFromIdHandle = (id: number) => {
    return async () => {
      await deleteHosSetFromIdRequest(id)

      //删除后重新渲染数据
      setIsDeleteById(!isDeleteById)
      message.success('删除医院成功')
    }
  }

  //6.点击批量删除的事件函数
  //
  const batchRemoveHandle = async() => {
    console.log(1);
    
    //点击批量删除,发送请求
    //需要传入当前选中的id,所以设置一个钩子保存选中的id
    await batchRemoveRequest(isSelectedId)
    //删除后重新渲染数据
    setIsDeleteById(!isDeleteById)
    //点击批量删除后修改批量删除的状态,强制改为true
    setIsSelected(true)
  }




  //点击查询事件
  return (
    <div className={style.outer}>
      {/* 在灰色背景上使用无边框的卡片。 */}
      <Card>
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 30 }}
          // initialValues={{ remember: true }}
          // autoComplete="off"
          layout='inline'
          onFinish={searchHosFinishHandle}
        >
          <Form.Item
            name="hosname"
          >
            <Input placeholder='请输入医院名称' />
          </Form.Item>

          <Form.Item
            name="hoscode"

          >
            <Input placeholder='请输入医院编号' />
          </Form.Item>


          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default" htmlType="reset">
              清空
            </Button>
          </Form.Item>
        </Form>

        <div className={style.mt}>
          <Button type="primary" className={style.mr} onClick={addHosHandle}>添加</Button>
          <Button type="primary" danger disabled={isSelected} onClick={batchRemoveHandle}>批量删除</Button>
        </div>

        <Table
          // 给table配置可选框
          rowSelection={{
            onChange: (ids: Key[]) => {
              //传入两个参数,第一个参数是选中的列表的id,一个是records的参数类型
              //key是react函数内部封装时自带的类型限制
              //多选框状态改变时,批量删除状态改变,当ids 的长度不为0的时候,批量删除变成可点击的 (ids.length = 1 可点击 状态应该是false ) 将值转为布尔值 !!2 转为true
              setIsSelected(!ids.length)
              setIsSelectedId(ids)

            }
          }}
          columns={columns}
          dataSource={tableData}
          className={style.mt}
          bordered
          rowKey='id'
          scroll={{ x: 1200 }}
          //pagination是一个配置项,外面的括号是js环境,里面是对象
          pagination={{
            //当前页数
            current,
            //每页条数
            pageSize,
            //每页展示条数(可选)
            pageSizeOptions: [5, 20, 40, 60],
            //数据总数
            total,
            //是否展示分页器(默认50条展示)
            showSizeChanger: true,
            onChange: changePageHandle,
            showTotal: (total: number, b: any) => {
              //接收两个参数,一个是总数,一个是每页条数

              return `当前医院为${total}个`
            }
          }}
          loading={isLoading}

        />
      </Card>
    </div>
  )
}
